/**
 * Created by zhangqi on 2015/7/28.
 * html5图片裁剪并上传插件，支持pad等移动设备，不支持Safari苹果浏览器（不支持FileReader对象）
 * 调用说明：用seajs加载后，new ImgCropper(options);
 * @options.fileFormName 类型：string 带上传的图标的表单name的名称，字符串英文表示：如：file
 * @options.url 类型 string 上传接口url
 * @options.params 类型：Object 上传附带的参数对象
 * @options.headers 类型 Object 上传请求头的附加信息
 * @options.callback 类型：function(data), return 成功服务端返回的数据
 *
 * 调用说明：
 * 如果只需要生成base64返回
 * new ImgAutoCropper({
                    outPicType:"base64"
                    ,outPicSize:{
                        width:500
                        ,height:400
                    }
                    ,callback:function(data){
                        if(data){
                            $(".video_preview_content").html('<img src="'+data+'" style="max-width:100%;max-height: 100%;">');
                        }
                    }
                });

    如果是需要上传的模式：

 new ImgAutoCropper({
                fileFormName:"file"
                ,url:'../php/fileupload.php'
                ,params:{personId:"aaa"}
                 ,outPicSize:{
                    width:500
                    ,height:400
                }
                ,callback:function(data){
                    if(data && typeof data == "string"){
                        data = JSON.parse(data);
                    }
                    if(data.result == "true"){
                        alert("上传成功！"+data.path);
                        $("#wrap").html('<img src="../php/'+data.path+'">');
                    }else{
                        alert("上传失败！");
                    }
                }
            });
 */

define(function(require,exprots,module){
    require("commonStaticDirectory/plugins/imgCropper/imgCropper.css");
    //图片裁剪插件
    require("commonStaticDirectory/plugins/imgCropper/cropper.min.css");
    require("commonStaticDirectory/plugins/imgCropper/cropper.min.js");
    //弹窗插件
    require("commonStaticDirectory/plugins/artDialog/ui-dialog.css");
    require("commonStaticDirectory/plugins/artDialog/dialog-plus.js");

    //require("commonStaticDirectory/plugins/jquery.loading"); //loading插件

    var ImgCropper = function(){
        this.init.apply(this,arguments);
    };

    ImgCropper.prototype = {
        constructor:ImgCropper,
        defaultOptions:{
            callback:undefined //上传成功之后的回调
        },
        init:function(options){
            var t = this;
            this.options = $.extend({},this.defaultOptions,options);
            if(!t.options.outPicSize.width || !t.options.outPicSize.height){
                alert("请传入输入图片的宽高");
                return;
            }
            this.initDialog();
        },
        initDialog:function(){
            var t = this;
            var _html ='' +
                '<div id="base_autoImgCut_upload" class="clearfix">' +
                '   <!--上传文件按钮-->' +
                '   <div id="base_autoImgCut_btn_wrap"> ' +
                '       <button id="base_autoImgCut_btn_select">选择图片文件</button>' +
                '       <input type="file" id="base_autoImgCut_file" accept="image/*"  /> ' +
                '   </div>' +
                '   <!--上传图片容器-->' +
                '   <div id="base_autoImgCut_action_wrap">' +
                '       <div id="base_autoImgCut_img_wrap"></div>' +
                '       <div id="base_autoImgCut_btns">' +
                '           <span class="icon icon-zoom-in"></span>' +
                '           <span class="icon icon-zoom-out"></span>' +
                '           <span class="icon icon-rotate-left"></span>' +
                '           <span class="icon icon-rotate-right"></span>' +
                '       </div>' +
                '   </div>' +
                '</div>';
            t.dialog = dialog({
                title:"图片裁剪"
                ,ok:function(){
                    //如果不支持html5文件接口则不处理
                    if(typeof FileReader !== "function"){
                        return false;
                    }
                    var $image = $("#base_img_crop");

                    var oCanvas = $image.cropper('getCroppedCanvas',{width:t.options.outPicSize.width,height:t.options.outPicSize.height});
                    if(typeof oCanvas.toDataURL != "function"){
                        return false;
                    }
                    var data=oCanvas.toDataURL();  // dataURL 的格式为 “data:image/png;base64,****”,逗号之前都是一些说明性的文字，我们只需要逗号之后的就行了

                    //如果是以base64来生成编码
                    if(t.options.outPicType == "base64"){
                        typeof t.options.callback == "function" && t.options.callback(data);
                        return true;
                    }else{
                        data=data.split(',')[1];
                        data=window.atob(data);
                        var ia = new Uint8Array(data.length);
                        for (var i = 0; i < data.length; i++) {
                            ia[i] = data.charCodeAt(i);
                        };

                        // canvas.toDataURL 返回的默认格式就是 image/png
                        var blob=new Blob([ia], {type:"image/png"});

                        var formData = new FormData();
                        formData.append(t.options.fileFormName, blob);
                        if(!$.isEmptyObject(t.options.params)){
                            for(var i in t.options.params){
                                formData.append(i, t.options.params[i]);
                            }
                        }
                        var oAjaxOpt = {
                            url: t.options.url,
                            method: "POST",
                            data: formData,
                            processData: false,
                            contentType: false,
                            beforeSend:function(){
                                $("#base_avatar_upload").loading(); //启用遮罩
                            },
                            success: function (data) {
                                typeof t.options.callback == "function" && t.options.callback(data);
                                t.dialog.close().remove();
                            },
                            error: function () {
                                alert("上传失败，请重试");
                            },
                            complete:function(){
                                $("#base_avatar_upload").loading({state:false}); //关闭遮罩
                            }
                        };
                        if(t.options.headers && !$.isEmptyObject(t.options.headers)){
                            oAjaxOpt.headers = t.options.headers;
                        }
                        $.ajax(oAjaxOpt);
                    }

                    return false;
                }
                ,cancel:function(){}
                ,content:_html
            }).showModal();
            t.bindEvent();
        },
        //格式验证
        fileCheck:function(str){
            if (str == "") {
                alert("请上传图片");
                return false;
            } else if (!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(str)) {
                alert("图片类型必须是.gif,jpeg,jpg,png中的一种");
                str = "";
                return false;
            }
            return true;
        },
        bindEvent:function(){
            var t = this;

            //浏览器支持判断
            if(typeof FileReader !== "function"){
                var $wrap = $('<div class="notsupport">系统检测到您的浏览器不支持该功能，请更换浏览器使用该功能，推荐使用chrome浏览器、FireFox浏览器、360浏览器（极速模式）、QQ浏览器（极速模式）</div>');
                $("#base_autoImgCut_btn_wrap").append($wrap);
            }

            var $image;
            $("#base_autoImgCut_file").change(function(){
                if(!t.fileCheck($(this).val())){
                    $(this).val("");
                    return false;
                }
                var reader = new FileReader();
                var oFile = $("#base_autoImgCut_file")[0].files[0];
                //图片文件文件不能大于2MB
                if(oFile.size > 5*1024*1024){
                    alert("文件大小不能超过5M");
                    $(this).val("");
                    return false;
                }
                reader.readAsDataURL(oFile);

                $("#base_autoImgCut_btn_wrap").hide(); //隐藏上传按钮
                $("#base_autoImgCut_action_wrap").show(); //显示裁剪容器
                reader.onload = function (e) {
                    var url = e.target.result;
                    var image=new Image();
                    image.src=url;
                    image.id = "base_img_crop";
                    $("#base_autoImgCut_img_wrap").append(image);

                    $image = $("#base_img_crop");

                    $image.cropper({
                        aspectRatio: t.options.outPicSize.width / t.options.outPicSize.height,
                        autoCrop: true,
                        dragMode: 'move',
                        crop: function(e) {
                            // Output the result data for cropping image.
                            /*console.log("***********");
                            console.log(e.x);
                            console.log(e.y);
                            console.log(e.width);
                            console.log(e.height);
                            console.log(e.rotate);
                            console.log(e.scaleX);
                            console.log(e.scaleY);
                            console.log("***********");
                            t.oCropWidth = e.width;
                            t.oCropHeight = e.height;*/
                        }
                    });
                }


            });
            //放大
            $("#base_autoImgCut_btns").find(".icon-zoom-in").click(function(){
                $image.cropper("zoom", 0.1);
            });
            //缩小
            $("#base_autoImgCut_btns").find(".icon-zoom-out").click(function(){
                $image.cropper("zoom", -0.1);
            });
            //左旋转
            $("#base_autoImgCut_btns").find(".icon-rotate-left").click(function(){
                $image.cropper("rotate", -45);
            });
            //右旋转
            $("#base_autoImgCut_btns").find(".icon-rotate-right").click(function(){
                $image.cropper("rotate", 45);
            });
        }
    };

    module.exports = ImgCropper;
});
